<!--
    Desenvolvido pela Fábrica de Software do CESUPA.
    Todos os direitos reservados.

    @author Breno Leite
    @author Jorge Carvalho
-->

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:appcommons="http://www.fabsoft.cesupa.br/appcommons"
      xmlns:u3="http://www.fabsoft.cesupa.br/appcommons"
      xmlns:u2="http://www.fabsoft.cesupa.br/appcommons">

    <ui:composition template="/infrastructure/templates/light-template.xhtml">
        <ui:param name="pagetitle" value="Bem-vindo ao [nome do sistema]"/>
        <ui:param name="pagekeywords" value="login, senha perdida, cadastro"/>
        <ui:param name="pagedescription" value="Página inicial do sistema"/>
        <ui:param name="initialpage" value="true"/>

        <ui:define name="currentstatusmessages">
            <appcommons:currentStatus statusid="validating-data-status" message="Validando dados..."/>
        </ui:define>

        <ui:define name="onpageload">
            Nifty("div#current-status-message", "bl br small");
            Nifty("div#footer,div#topo-titulo,div#status", "small");
            setFocusAtElement('login-form:email-field');
        </ui:define>
        
            <ui:define name="pagestyle">
            div#features{
            clear:left;
            }

            .email-field, .password-field{
            padding:6px 0px 6px 25px;
            width:80%;
            }

            .email-field {
            background:transparent url(#{facesContext.externalContext.request.contextPath}/infrastructure/images/icons/email-16x16.gif) no-repeat 2% 50%;
            background-color:white;
            }
            .password-field{
            background:transparent url(#{facesContext.externalContext.request.contextPath}/infrastructure/images/icons/key-16x16.gif) no-repeat 2% 50%;
            background-color:white;
            }

            div#functions-area{
            margin-right:390px;
            clear:left;
            }

            div#functions-area h3{
            font-weight:bold;
            letter-spacing:1px;
            font-size:small;
            color:blue;
            }

            div#functions-area p{
            line-height:1.5em;
            }

            div#functions-area img{
            float:left;
            margin-right:10px;
            }

            .custom-table td{
            border-bottom: dotted 1px black;
            }
        </ui:define>

        <ui:define name="content">
            <div id="controls">
                <div style="line-height:1.5em;">
                    <c:if test="#{sessionBean.userAuthenticated}">
                        <div class="box">
                            <div style="font-size:medium;" class="highlighted-area">
                                <span style="font-size:large;font-weight:bold;color:#97B7E1;text-shadow: white 0.1em 0.1em 0.2em;">
                                    [nome do usuário],
                                </span>
                                <br/>
                                #{texts.AuthenticationRealized}
                            </div>

                            <div style="background-color:#EDEFF2;">
                                #{texts.WhatYouCanDo}:
                                <br/>
                                <br/>
                                <h:form>
                                    <ul style="list-style-type:none;">
                                        <li>
                                            <h:graphicImage url="/infrastructure/images/icons/left-arrow-16x16.gif"/>
                                            <a href="#" onclick="goToPreviousPage()">
                                                #{texts.BackToPreviusPage}
                                            </a>
                                        </li>
                                        <li>
                                            <h:graphicImage url="/infrastructure/images/icons/logout-16x16.gif"/>
                                            <h:outputLink value="#" id="exit-link" title="#{tooltipmessages.ExitSystem}">
                                                #{words.Exit}
                                                <rich:componentControl for="exit-confirmation-window"
                                                                       attachTo="exit-link" operation="show"
                                                                       event="onclick"/>
                                            </h:outputLink>
                                        </li>
                                    </ul>
                                </h:form>
                            </div>
                        </div>
                    </c:if>
                </div>

                <c:if test="#{!sessionBean.userAuthenticated}">
                    <div class="box">
                        <div style="text-align:center;background-color:#E3FECB;font-weight:bold;">
                            <h:form>
                                Novo por aqui? <a href="#">Cadastre-se</a>, é grátis.
                            </h:form>
                        </div>
                    </div>
                    <br/>

                    <div class="box">
                        <div style="padding:0;margin:0;">
                            <h:form id="login-form">
                                <div style="font-size:medium;background-color:#97B7E1;color:white;padding:3px;">
                                    <table>
                                        <tr>
                                            <td width="20px">
                                                <h:graphicImage url="/infrastructure/images/icons/user-16x16.gif"
                                                                alt="login icon"/>
                                            </td>
                                            <td>
                                                <span style="letter-spacing:2px;font-weight:bold;">
                                                    #{texts.EnterSystem}
                                                </span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <table class="custom-table" border="0" style="padding:2px;width:100%;">
                                    <tr>
                                        <td valign="top" style="width:100px;">
                                            <label for="login-form:email-field">#{words.EMail}:</label><br/>
                                            <appcommons:requiredMarker/>
                                        </td>
                                        <td valign="top">
                                            <h:inputText styleClass="special-textfield email-field text-field keyboardInput"
                                                         id="email-field" required="true" label="#{words.EMail}"
                                                         accesskey="e" validator="emailValidator" value="#{loginBean.email}">
                                            </h:inputText>
                                            <br/>
                                            <appcommons:fieldMessage type="info" text="#{words.Example}: usuario@servidor.com"/>
                                            <appcommons:fieldMessage type="validation" for="email-field"/>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td valign="top" style="width:100px;">
                                            <label for="login-form:password-field">#{words.Password}:</label><br/>
                                            <appcommons:requiredMarker/>
                                        </td>
                                        <td valign="top">
                                            <h:inputSecret id="password-field"
                                                           styleClass="special-textfield text-field keyboardInput password-field"
                                                           required="true" label="#{words.Password}"
                                                           accesskey="s" value="#{loginBean.password}">

                                            </h:inputSecret>
                                            <br/>
                                            <appcommons:fieldMessage type="validation" for="password-field"/>
                                        </td>
                                    </tr>
                                </table>

                                <div class="buttons" style="float:right;">
                                    <h:commandLink value="#{words.Enter}"
                                                   styleClass="positive primarybutton"
                                                   id="enter-button"
                                                   title="#{texts.EnterSystem}"
                                                   action="#{loginBean.enterSystem}"
                                                   onMouseOver="window.status='Para autenticar-se na aplicação clique aqui'; return true">
                                    </h:commandLink>

                                    <button title="#{tooltipmessages.CleanFields}"
                                            accesskey="l" type="reset">
                                        #{words.Clean}
                                    </button>
                                </div>
                                <br/><br/><br/>
                            </h:form>
                        </div>
                    </div>
                    <br/>
                    <div class="default-box">
                        <div>
                            <form>
                                <a href="#">Esqueceu sua senha?</a>
                            </form>
                        </div>
                    </div>
                    <br/>
                </c:if>
            </div>
            <br/>

            <div id="functions-area">
                <h2>Breve descrição do software. Phasellus consequat felis sit
                    amet dolor accumsan vulputate. Fusce fermentum urna nec dolor
                    dapibus non vestibulum neque fermentum. Sed quis ligula felis,
                    nec semper velit.</h2>
                <br />
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/infrastructure/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 1</h3>
                <p>Etiam tincidunt vehicula adipiscing. Phasellus consequat felis sit amet dolor accumsan vulputate. Fusce fermentum urna nec dolor dapibus non vestibulum neque fermentum. Sed quis ligula felis, nec semper velit.</p>
                <br />
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/infrastructure/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 2</h3>
                <p>Cras quis nisi a diam facilisis ullamcorper. Duis suscipit libero vel sapien tempus viverra. Nulla scelerisque elementum quam tincidunt facilisis. Vestibulum fermentum magna nec dui ullamcorper tempus. Nulla facilisi. </p>
                <br/>
                <img alt="#{altmessages.FuncImage}" src="#{facesContext.externalContext.request.contextPath}/infrastructure/images/placeholder-img.gif" border="0"/>
                <h3>Funcionalidade 2</h3>
                <p>Cras quis nisi a diam facilisis ullamcorper. Duis suscipit libero vel sapien tempus viverra. Nulla scelerisque elementum quam tincidunt facilisis. Vestibulum fermentum magna nec dui ullamcorper tempus. Nulla facilisi. </p>
            </div>

            <!-- modal panels -->
            <ui:include src="/infrastructure/general/windows/exit-window.xhtml"/>
        </ui:define><!--fecha define conteudo-->
    </ui:composition>
</html>
